# Wallet Connect

In this tutorial, we will go through the steps of integrating WalletConnect into your dapp (you can read more about this wallet at: https://walletconnect.com/).

## Prerequisites

The tutorial assumes the user has already started with the basics of `useDApp`.

See the [Getting Started](/docs) guide if you are a new user.

## WalletConnect v1 vs v2

[WalletConnect v1 has been shut down on June 28, 2023.](https://docs.walletconnect.com/2.0/advanced/migration-from-v1.x/overview) The only official WalletConnect version is now v2.

`usedapp` provides `WalletConnectV2Connector` which is compatible with the changes. To use it, install `@usedapp/wallet-connect-v2-connector` package and add the following config to your dapp: 

```ts
connectors: {
    ...
    walletConnectV2: new WalletConnectV2Connector({
      projectId: <YOUR_WALLETCONNECT_PROJECT_ID>,
      chains: [Mainnet],
      rpcMap: {
        1: 'https://mainnet.infura.io/v3/<YOUR_INFURA_KEY>',
      },
    }),
    ...
  },
```

Now you can connect to WalletConnect v2 by calling `activateBrowserWallet` with the connector name:

```ts
import { useEthers } from '@usedapp/core'

...

const { activateBrowserWallet } = useEthers()

...

const handleConnectWalletConnect = () => {
    activateBrowserWallet({ type: 'walletConnectV2' })
}
```

## Known issues

### Chain ID

In WalletConnect v2 you must specify the supported chains by your dapp before connecting to the wallet. This can cause issues with some wallets. For instance, Gnosis Safe rejects connection attempts if:
- the correct chain id is not specified, or
- if there is more than one chain id specified. 

The solution is to set only one chain id in the `chains` array in the connector config. For instance, if you want to support only Optimsim, you can do the following:

```ts
connectors: {
    ...
    walletConnectV2: new WalletConnectV2Connector({
      projectId: <YOUR_WALLETCONNECT_PROJECT_ID>,
      chains: [Optimism],
      rpcMap: {
        1: 'https://optimism.infura.io/v3/<YOUR_INFURA_KEY>',
      },
    }),
    ...
  },
```

It is possible to create multiple instances of WalletConnectV2Connector, in case your app needs to support Gnosis Safe on multiple chains:

```ts
connectors: {
    ...
    walletConnectV2_mainnet: new WalletConnectV2Connector({
      projectId: <YOUR_WALLETCONNECT_PROJECT_ID>,
      chains: [Mainnet],
      rpcMap: {
        1: 'https://optimism.infura.io/v3/<YOUR_INFURA_KEY>',
      },
    }),
    walletConnectV2_optimism: new WalletConnectV2Connector({
      projectId: <YOUR_WALLETCONNECT_PROJECT_ID>,
      chains: [Optimism],
      rpcMap: {
        1: 'https://mainnet.infura.io/v3/<YOUR_INFURA_KEY>',
      },
    }),
    ...
  },
```
